<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
    padding-bottom: 160px;
    overflow: auto;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .weui-cells {
    border-radius: 5px;
    margin-top: 0;
  }
  .paylayer {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #ddd;
    background: #fff;
    z-index: 100;
  }
  .rj-cont {
    background: #fff;
  }
  .rj-cell span i {
    color: red;
    font-size: 30px;
    font-style: normal;
  }
  .paylayer .rj-cell {
    padding: 5px;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
    text-align: left;
  }
  .weui-panel {
    margin-top: 0;
  }
  .all-btn {
    position: absolute;
    right: 8px;
    bottom: 0;
  }
  .all-btn i {
    font-size: 16px;
    position: absolute;
    left: -7px;
    top: 8px;
  }
  .weui-cells {
    text-align: left;
  }
</style>
<template>
  <div class="comon">
    <div class="rj-topbar rj-cont">
      {{title}}
      <a @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px">
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit" style="position: relative;">
          <div class="rj-cell max">
            <label>客户：</label>
            <span>{{payback.customer}}</span>
          </div>
          <div class="rj-cell max">
            <label>回款金额(元)：</label>
            <span>{{payback.backamount}}</span>
          </div>
<!--          <div class="rj-cell max">-->
<!--            <label>预付款抵扣金额(元)：</label>-->
<!--            <span>{{payback.prepaid}}</span>-->
<!--          </div>-->
          <div class="rj-cell max" style="display: block;" v-if="payback.imgeurl != ''">
            <label>附件<i v-show="payback.imagename != ''">({{payback.imagename}})</i>：</label>
            <div class="exp uploaderFiles" style="display: inline-block;">
              <img class="attachimg" style="padding-right: 5px;" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="payback.imgeurl + '-suolue.png'" :data-img="payback.imgeurl + '.png'" width="85" />
            </div>
          </div>
          <div class="rj-cell all-btn" style="" >
<!--          <div class="rj-cell all-btn" style="" id="allSec">-->
<!--            <i class="weui-icon-circle"></i>-->
<!--            <label>全选</label>-->
            <label @click="addOrder" style="color: #0bb20c;">添加订单</label>
          </div>
        </div>
      </div>
    </div>
    <div class="list" id="list">
          <div class="weui-form-preview" v-for="(item, index) in orders" :key="item.guid">
            <div class="weui-cells weui-cells_checkbox">
              <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary payitem" data-guid="">
                  <p> </p>
                  <div class="rj-cell max">
                    <label>销售单号：</label>
                    <span>{{item.ordercode}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>待回款金额(元)：</label>
                    <span>{{item.amount}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>备注：</label>
                    <span>{{item.remark}}</span>
                  </div>
                  <p></p>
                </div>
                <label class="weui-check_label weui-cell__ft" :for="'weui-select-id-' + item.orderid">
                  <input type="checkbox" class="weui-check" name="weui-select" :value="item.orderid" :data-amount="item.amount" :data-guid="item.orderid" :id="'weui-select-id-' + item.orderid" />
                  <span class="weui-icon-checked"></span>
                </label>
              </div>
            </div>
      </div>
    </div>
    <div class="paylayer">
      <div class="rj-cell">
        <label>合计：</label>
      </div>
      <div class="rj-cell">
        <label></label>
        <span id="carnum"><i>0</i> 车</span>
      </div>
<!--      <div class="rj-cell">-->
<!--        <label></label>-->
<!--        <span id="weight"><i>0</i> 吨</span>-->
<!--      </div>-->
      <div class="rj-cell">
        <label></label>
        <span id="amount"><i>0</i> 元</span>
      </div>
      <div class="weui-cell" style="display: block">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" name="" v-model="opinion" placeholder="请输入审批意见" rows="2"></textarea>
        </div>
      </div>
      <div class="weui-form-preview__ft">
        <a class="weui-form-preview__btn weui-form-preview__btn_primary subbtn" @click="send" href="javascript:">同意</a>
        <a class="weui-form-preview__btn weui-form-preview__btn_default" @click="$router.back(-1)">返回</a>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  export default {
    name: 'PaybackDetail',
    data () {
      return {
        id: '',
        fromOrderlist: false,
        payback: {},
        orders: [],
        totalGuids: '',
        selected : false,
        opinion: '',
        nodeid: '',
        annex: '',
        title: ''
      }
    },
    created() {
    },
    mounted() {
      this.id = this.$route.query.guid;
      this.nodeid = this.$route.query.nodeid;
      this.annex = this.$route.query.annex;
      this.title = this.$route.query.title;
      this.fromOrderlist = this.$route.query.reffer ? true : false;
      this.getBaseInfo();

      let that = this;
      //首次加载为未选中状态
      $('#allSec').click(function(){
        var elem = $('input[name="weui-select"]');
        for (var i=0; i< elem.length; i++) {
          if (!elem.eq(i).is(':checked')) {
            that.selected = true;
          }
        }
        if (that.selected) {
          that.switchChecked(false, elem);
        } else {
          that.switchChecked(true, elem);
        }
      })

      //选择运单后计算总支付金额
      $('#list').on("change", "input[name='weui-select']", function(){
        var elem = $('input[name="weui-select"]:checked');
        var len = elem.length;
        var totalAmoumt = 0;
        var totalCarnum = 0;
        var totalWeight = 0;
        that.totalGuids = "";
        for (var i=0; i<len; i++) {
          totalAmoumt += elem.eq(i).data('amount');
          totalWeight += elem.eq(i).data('weight');
          that.totalGuids = that.totalGuids + elem.eq(i).data('guid') + ',';
          console.log(that.totalGuids);
          totalCarnum += 1;
        }
        //联动全选按钮
        if (totalCarnum == $('input[name="weui-select"]').length) {
          if (that.selected) {
            that.switchBtnStyle(true);
          }
        } else {
          if (!that.selected) {
            that.switchBtnStyle(false);
          }
        }

        $('#amount i').text(that.toDecimal2NoZero(totalAmoumt));
        //$('#weight i').text(that.toDecimal2NoZero(totalWeight));
        $('#carnum i').text(totalCarnum);
        that.totalGuids = that.totalGuids.substr(0,that.totalGuids.length-1);
      })

      //图片浏览器
      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not( ".exp" ).length;
        var imgArr = [];
        for (var i=0; i<num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        console.log('imgArr:', imgArr)
        pb.open();
      });
    },
    methods: {
      mescrollInit (mescroll) {
        this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
      },
      getBaseInfo: function() {
        // 联网请求
        this.axios({
          method: 'get',
          url: '/pay/Paybackinfo!detail.action',
          params: {guid: this.id}
        }).then((response) => {
          if (response.data.code == 1) {
            this.payback = response.data.msg;
            this.orders = response.data.msg.items;
            if (this.fromOrderlist) {
              this.orders = this.orders.concat(this.$store.state.sellforms);
            }
          } else if (response.data.code == 0) {
            this.toastText(response.data.msg);
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
            this.toastError("系统错误");
          }

        })
      },
      switchChecked: function (status, elem) {
        if (status) {
          for (var i=0; i< elem.length; i++) {
            if (elem.eq(i).is(':checked')) {
              elem.eq(i).click();
            }
          }
          this.switchBtnStyle(false);
        } else {
          for (var i=0; i< elem.length; i++) {
            if (!elem.eq(i).is(':checked')) {
              elem.eq(i).click();
            }
          }
          this.switchBtnStyle(true);
        }
      },
      switchBtnStyle: function (status){
        if (status) {
          $('#allSec').find('i').removeClass("weui-icon-circle");
          $('#allSec').find('i').addClass("weui-icon-success");
          this.selected = false;
        } else {
          $('#allSec').find('i').removeClass("weui-icon-success");
          $('#allSec').find('i').addClass("weui-icon-circle");
          this.selected = true;
        }
      },
      addOrder: function() {
        this.$router.push({name: 'PaybackOrdersList', query: {guid: this.id, customerid: this.payback.customerid, customername: this.payback.customer}});
      },
      send: function () {
        let that = this;

        this.opinion = this.opinion != '' ? this.opinion : '同意';

        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");
        this.axios({
          method: 'post',
          url: '/pay/Paybackinfo!approval.action',
          params: {guid: this.id, ids: this.totalGuids, nodeid: this.nodeid, opinion: this.opinion}
        }).then((response) => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if (response.data.code == 1) {
            this.toastSuccess('操作成功');
            this.$router.push({name: 'Paybacklist'});
          } else if (response.data.code == 0) {
            this.toastText(response.data.msg);
          } else if (response.data.msg == 'canotopt') {
            this.toastText('不允许的操作！');
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
            this.toastError("系统错误");
          }

        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });
      }
    }
  };
</script>
